<template>
  <uni-card title="配置项">
    <uni-table border stripe emptyText="暂无更多数据">
      <!-- 表头行 -->
      <uni-tr>
        <uni-th align="center" width="60">配置名</uni-th>
        <uni-th width="10" align="center">操作</uni-th>
      </uni-tr>
      <!-- 表格数据行 -->
      <uni-tr v-for="(item, index) in tabelData" :key="index">
        <uni-td>{{ item.configName }}</uni-td>
        <uni-td>
          <view class="flex justify-center items-center">
            <button
              class="text-center"
              size="mini"
              type="primary"
              @tap="onShowData(item)"
            >
              加载配置
            </button>
          </view>
        </uni-td>
      </uni-tr>
    </uni-table>
  </uni-card>
</template>

<script lang="ts" setup>
import { useConfigStore } from '@/stores';
import { ref, defineEmits, onMounted } from 'vue';
const props = defineProps(['name']);
const tabelData = ref([]) as any;
const emit = defineEmits(['showFormData']);

onMounted(() => {
  showConfig();
});
// 遍历出需要展示的配置项函数
const showConfig = () => {
  tabelData.value = useConfigStore().getConfigByName(props.name) as any;
};

// 修改配置项函数
const onShowData = (item: any) => {
  // 传递表单数据
  emit('showFormData', item.value);
};
</script>

<style lang="scss" scoped></style>
